<template>
    <view class="order_details">
      <z-nav-bar id="nav" bgColor="#ffffff" title="售后"></z-nav-bar>
       <public-loading></public-loading>
      <view class="order_info_wrap mgt-24">
            <view class="order_info_box df justify-between item-bottom-border">
            <view class="order_info_left">订单编号</view>
            <view class="order_no">{{orderInfo.orderId}}</view>
            </view>
            <view class="order_info_box df justify-between">
            <view class="order_info_left">下单时间</view>
            <view class="order_no">{{orderInfo.createTime}}</view>
            </view>
        </view>
      <view class="order_details_title mgt-24 mgl-62   mgb-20">售后类型</view>
      <view class="order_type_list">
        <view class="order_type_item df align-center mgb-24" 
        style="background:#fff;border-radius:16rpx;box-shadow:0 2rpx 8rpx #f2f2f2;padding:24rpx 32rpx;"
        @click="handleJump('/pages/cleaningOrder/backwashing')"
        >
          <view class="icon_circle " style="width:64rpx;height:64rpx;border-radius:50%;background:#232c3b;margin-right:24rpx;">
            <text style="color:#fff;font-size:32rpx;">洗</text>
          </view>
          <view class="flex1 df" style="font-size:32rpx;color:#222;justify-content: space-between;">
            <text>我要返洗</text> 
              <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
       
        </view>
        <view class="order_type_item df align-center"   @click="handleJump('/pages/cleaningOrder/refundOrder')"  style="background:#fff;border-radius:16rpx;box-shadow:0 2rpx 8rpx #f2f2f2;padding:24rpx 32rpx;">
          <view class="icon_circle df align-center justify-center" style="width:64rpx;height:64rpx;border-radius:50%;margin-right:24rpx;">
           <image src="../static/icon/icon_money.png" />
          </view>
          <view class="flex1 df" style="font-size:32rpx;color:#222;justify-content: space-between;">
            <text>我要退款</text>
              <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
      </view>
      <view class="bottom-btn-box" >
        <main-button :color="'#fff'" :margin="'24rpx 0 0'" @click="submit">联系店铺</main-button>
      </view>
    </view>
</template>
<script  setup>
import { ref ,reactive,toRefs} from 'vue';
import { onLoad, } from '@dcloudio/uni-app';
import {customerQryOrderDetails} from '@/api/cleaningOrder'
import {useCustomStores} from '@/utils/hook'
const {ShopStore} = useCustomStores()
const state= reactive({
  orderId:'',
  orderInfo:{}
})
const loadDetails =()=>{
   customerQryOrderDetails(state.orderId).then(res=>{
     console.log('res',res)
     state.orderInfo = res
   })
 }
onLoad(({orderId})=>{
    state.orderId = orderId
    loadDetails()
})
 
const {orderInfo} =toRefs(state)
function handleJump(url) {
  ShopStore.setOrderDetailsInfo(orderInfo.value)
  uni.navigateTo({
    url: url 
  });
}
</script>


<style scoped lang="scss">
.order_details {
  box-sizing: border-box;
  width: 100%;
  padding: 0 32rpx;

  .order_info_wrap {
    box-sizing: border-box;
    width: 100%;
    padding: 0 32rpx;
    border-radius: 16rpx;
    background-color: #FFFFFF;

    .order_info_box {
      padding: 32rpx;

      .order_info_left {
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
      }

      .order_no {
        font-weight: 400;
        font-size: 28rpx;
        color: #444444;
      }

    }
  }
  .order_details_title{
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
  }
}
.order_type_item{
  justify-content: space-between;
}
.icon_circle{
  display: flex;
  align-items: center;
  justify-content: center;
  >image{
    width:64rpx;
    height: 64rpx;
  }

}
</style>
